<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            margin: 100px auto;
            border-collapse: collapse;
            font-size: 12px;
        }
        
        table thead {
            background: lightblue;
            color: white;
            height: 44px;
        }
        
        td {
            /* background: red; */
            text-indent: 10px;
        }
        
        td:nth-child(1),
        th:nth-child(1) {
            width: 55px;
        }
        
        td:nth-child(2),
        th:nth-child(2) {
            width: 177px;
        }
        
        td:nth-child(3),
        th:nth-child(3) {
            width: 88px;
        }
    </style>
</head>

<body>
    <table border="1" border-color="#ccc" width="314" height="216">
        <thead>
            <th>
                <input type="checkbox" name="checkbox_all" id="checkbox_all" />
            </th>
            <th>商品</th>
            <th>价钱</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="checkbox" id="checkbox">
                </td>
                <td>
                    iPhone8
                </td>
                <td>
                    8000
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="checkbox" id="checkbox">
                </td>
                <td>
                    iPad Pro
                </td>
                <td>
                    5000
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="checkbox" id="checkbox">
                </td>
                <td>
                    iPad Air
                </td>
                <td>
                    2000
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="checkbox" id="checkbox">
                </td>
                <td>
                    Apple Watch
                </td>
                <td>
                    2000
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        let checkbox_all = document.querySelector("#checkbox_all");
        console.log(checkbox_all);

        let check = document.querySelectorAll("#checkbox");
        console.log(check);

        //2.给全选按钮绑定事件，如果全选按钮选中了，下面的所有 check都选中，
        //如果全选按钮不选中了，下面的所有 check都不选中
        checkbox_all.onclick = function() {

            for (var i = 0; i < check.length; i++) {

                check[i].checked = this.checked;
            }
        }

        //3. 如果下面的所有 input 框都选中，全选按钮就选中
        for (var i = 0; i < check.length; i++) {
            check[i].onclick = checkOnclick;
        }

        function checkOnclick() {

            //假设 下面的所有 input 都选中
            var type = true;
            for (let i = 0; i < check.length; i++) {
                if (!check[i].checked) { //没选中
                    type = false;
                    break;
                }
            }
            //给 全选按钮设置 状态值
            checkbox_all.checked = type;

        }
    </script>
</body>

</html>